<script setup>
import {ref, watch} from 'vue'
import {formatToLocalDate} from "@/utils/format.js";
import {gameAddAPI} from "@/api/AdminApi/game.js";
import 'element-plus/theme-chalk/el-message.css'
import {ElMessage} from "element-plus";
import {publisherGetAllAPI} from '@/api/AdminApi/publisher.js'

const game = ref({
  id: null,
  chineseName: null,
  englishName: null,
  issueDate: null,
  developer: null,
  publisher: {
    id: null,
    name: null
  }
})

const rules = {
  chineseName: [
    { required: true, message: '请输入中文名', trigger: 'blur' }
  ],
  englishName: [
    { required: true, message: '请输入英文名', trigger: 'blur' }
  ],
  issueDate: [
    { required: true, message: '请输入发行日期', trigger: 'blur' }
  ],
  developer: [
    { required: true, message: '请输入开发商', trigger: 'blur' }
  ],
  publisher: [
    { required: true, message: '请关联发行商', trigger: 'blur' }
  ]
}

const formRef = ref()

// 提交
const submit = async () => {
  game.value.issueDate = formatToLocalDate(game.value.issueDate)
  console.log(game.value)
  const res = await gameAddAPI(game.value)
  if (res.code === 1) {
    return res
  } else {
    ElMessage.error(res.msg)
  }
}
// 校验
const validate = async () => {
  if (game.value.publisher.id === null || game.value.publisher.id === '') {
    return false
  }
  try {
    const isValid = await formRef.value.validate();
    if (isValid) {
      return true
    }
  } catch (error) {
    return false
  }
};

// 父组件调用提交方法
defineExpose({
  submit:submit,
  validate:validate
})

const AllPublishers= ref([])
const dialogVisible = ref(false)
const publisherName = ref()
// 打开分类列表
const showAllPublishers = () => {
  dialogVisible.value = true
}

const timer = ref()
watch(publisherName, (newValue) => {
  AllPublishers.value = []
  clearTimeout(timer.value)
  timer.value = setTimeout(async () => {
    const res = await publisherGetAllAPI(newValue)
    AllPublishers.value = res.data
  }, 300);
}, { deep: true, immediate: true });

const selectPublisher = (item) => {
  game.value.publisher = item
  dialogVisible.value = false
}

</script>

<template>
  <el-form ref="formRef" :model="game" :rules="rules" label-width="auto" style="max-width: 1200px">
    <el-form-item label="游戏中文名称" prop="chineseName">
      <el-input v-model="game.chineseName"></el-input>
    </el-form-item>
    <el-form-item label="游戏英文名称" prop="englishName">
      <el-input v-model="game.englishName"></el-input>
    </el-form-item>
    <el-form-item label="发行日期" prop="issueDate">
      <el-date-picker
          v-model="game.issueDate"
          type="date"
          placeholder="请选择创建日期"
      />
    </el-form-item>
    <el-form-item label="开发商" prop="developer">
      <el-input v-model="game.developer"></el-input>
    </el-form-item>
    <el-form-item label="发行商" prop="publisher">
      {{game.publisher.name}}
      <el-button style="margin-left: 30px" type="success" @click="showAllPublishers">
        + 关联发行商
      </el-button>
    </el-form-item>
    <el-dialog
        width="500px"
        draggable
        v-model="dialogVisible">
      <span>分类名:&nbsp;&nbsp;</span>
      <el-input v-model="publisherName" style="width: 240px" placeholder="请输入发行商名称" />
      <el-scrollbar class="scrollbarContainer" height="300px">
        <div class="publisherItem" v-for="item in AllPublishers" :key="item" @click="selectPublisher(item)">
          <div class="layoutItem">
            <div class="left">
              <el-image :src="item.icon"></el-image>
            </div>
            <div class="right">
              <div class="ellipsis" style="width: 148px;"><strong>{{item.name}}</strong></div>
              <div style="font-size: 12px; margin-top: 4px">成立日期：</div>
              <div>{{item.createDate}}</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
  </el-form>
</template>

<style scoped>
.scrollbarContainer {
  margin-top: 10px;
  display: flex;
  .publisherItem {
    display: inline-block;
    height: 80px;
    width: 234px;
    padding: 5px;
    cursor: pointer;
    .layoutItem {
      display: flex;
      .left {
        width: 70px;
        height: 70px;
      }
      .right {
        margin-left: 5px;
        height: 70px;
      }
    }
  }
  .publisherItem:hover {
    background-color: #d7d7d7;
  }
}

</style>
